<template>
  <a-drawer
    title="实施方案模板配置"
    :maskClosable="true"
    width=650
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto;padding-bottom: 53px;">

    <a-form>
      <a-form-item label='模板'>
        <a-tree
          v-if="treeData.length"
          checkable
          :defaultExpandAll="true"
          @check="onCheck"
          :checkedKeys="checkedKeys"
          :treeData="treeData"
          :checkStrictly="checkStrictly">
          <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
            {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
          </span>
        </a-tree>
      </a-form-item>
    </a-form>

    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存
      </a-button>
      <a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
    </div>


  </a-drawer>

</template>
<script>
  import {getAction, httpAction} from '@/api/manage'

  export default {
    name: "temp",
    components: {},
    data() {
      return {
        rowData: "",
        treeData: [],
        checkedKeys: [],
        autoExpandParent: true,
        checkStrictly: false,
        visible: false,
        loading: false,
        url: '/sjxmzygl/sjWorkZtfa/getTemplateTreeList',
      }
    },
    methods: {
      onCheck(o) {
        if (this.checkStrictly) {
          this.checkedKeys = o.checked;
        } else {
          this.checkedKeys = o
        }
      },
      show(data) {
        this.rowData = data
        if (data.tempId) {
          let arr = data.tempId.split(',')
          this.checkedKeys = arr

        }
        this.visible = true;
      },
      close() {
        this.reset()
        this.$emit('close');
        this.visible = false;
      },
      reset() {
        this.checkedKeys = []
        this.loading = false
      },
      handleCancel() {
        this.close()
      },
      handleSubmit(exit) {
        let that = this;
        let params = {
          roleId: that.roleId,
          permissionIds: that.checkedKeys.join(",")
        };
        that.loading = true;
        console.log("请求参数：", params);
        delete this.rowData.tempId
        httpAction('/xtsz/sjImplementTemplate/edit', {
          ...this.rowData,
          tempId: this.checkedKeys.toString()
        }, 'put').then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.loading = false;
            if (exit) {
              that.$emit('ok')
              that.close()
            }
          } else {
            that.$message.error(res.message);
            that.loading = false;
            if (exit) {
              that.$emit('ok')
              that.close()
            }
          }
          this.loadData();
        })
      },
      loadData() {
        var that = this
        that.treeData = []
        that.departTree = []
        getAction(this.url, {templateId: this.rowData.tempType}).then((res) => {
          if (res.success) {
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.treeData.push(temp)
            }
            this.loading = false
          }
        })
      }
    },
    watch: {
      visible() {
        if (this.visible) {
          this.loadData();
        }
      }
    }
  }

</script>
<style lang="less" scoped>
  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

</style>